<style>
</style>
<template>
    <div style="display: inline-block" :style="{width:width+'px'}">
        <span v-if="!hoverShow" class="clamp" :style="{'-webkit-line-clamp':line}">
            {{text}}}
        </span>
        <el-popover
                :popper-class="'el-popover-'+theme"
                v-if="hoverShow"
                placement="bottom"
                trigger="hover"
        >
        <div style="white-space: pre-line;max-height: 400px;overflow-y: scroll"  :style="{'max-width':popWidth+'px'}">
            {{text}}
        </div>

        <span slot="reference"
              class="clamp" :style="{'-webkit-line-clamp':line}">
            {{text}}
        </span>
    </el-popover>
    </div>

</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-clamp',
            props: {
                popWidth:{
                    default: '400'
                },
                width:{
                    default: '400'
                },
                text: {
                    'default': ''
                },
                theme:{
                    'default':'dark'
                },
                line: [Number,String],
                hoverShow: Boolean,
            }, created: function () {
            }, methods: {}
        }
    });
</script>
